<template>
  <div class="item_bock flex">
    <label class="label">
      <el-image v-if="form.avatar" :src="form.avatar" lazy class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon flexcenter avatarIcon" />
      <input type="file" accept="image/*" class="hiddenInput" @change="handleFile">
      <div :v-if="showInput" class="img-address flex" :style="`${showInput === true ? 'display: block' : 'display: none'}`">
        <span><span class="mustval">*</span>图片地址：</span>
        <el-input v-model="form.avatar" class="img-input m-t-20" />
      </div>
    </label>
  </div>
</template>

<script>
export default {
  name: 'UploadAvatar',
  props: {
    showInput: {
      type: Boolean,
      default: false
    },
    imgUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        avatar: this.imgUrl,
        url: require('@/assets/error.png')
      }
    }
  },
  created() {},
  methods: {
    uploadHeadImg: function() {
      this.$el.querySelector('.hiddenInput').click()
    },
    // 将头像显示
    handleFile: function(e) {
      const $target = e.target || e.srcElement
      const file = $target.files[0]
      var reader = new FileReader()
      reader.onload = (data) => {
        const res = data.target || data.srcElement
        this.form.avatar = res.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

<style lang="scss">
.item_bock {
  label {
    width: 180px;
    height: 100px;
    .el-image {
      width: 180px;
      height: 100px;
      border-radius: 5px;
      .el-image__error {
        display: none;
      }
    }
  label:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 40px;
    color: #8c939d;
    width: 180px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border-radius: 5px;
    background: rgba($color: #eeeeee, $alpha: .5);
  }
    .img-input {
      width:260px;
    }
    .img-address {
      width: 400px;
      margin-left: -78px;
      span {
        line-height: 70px;
        font-size: 14px;
        font-weight: 400;
      }
    }
    .hiddenInput {
      display: none;
    }
  }
}
</style>
